import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Popover,Tools,Flex,Icon } from 'weaver-mobile';
import {Route, withRouter } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';
import Ocr from './receptionTo/Ocr';
const getLabel = Tools.getLabel;
const tweenFunctions = require('tween-functions');

// const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
// let wrapProps;
// if (isIPhone) {
//     wrapProps = {
//         onTouchStart: e => e.preventDefault(),
//     };
// }


@withRouter
@inject ('receptionStore')
@observer
class Reception extends React.Component {
    constructor(props){
        super(props);
        // this.state = {
        //     modal1: false,
        // };

        const {receptionStore} = this.props;
        const {getBaseRoute} = receptionStore;

        // let now = getNow();
        // setDateParams({
        //     year:now.year,
        //     month:now.month
        // });
        
        //获取基础路由
        getBaseRoute(this)
    }

    static defaultProps = {
        prefixCls:"fnaMobile-reception"
    }

    componentDidMount() {
        const {receptionStore} = this.props;
        const { initData } = receptionStore;
        initData();
    }

    render() {
        const { receptionStore,prefixCls } = this.props;
        const { receptionList,routeData } = receptionStore;

        return (
            <div className={`${prefixCls}`}>
                <div className={'multi-col-layouts'}>
                    <Flex className={`fna-flex-icon fna-flex-icon-02`} style={{padding:'20px 10px'}}>
                        {receptionList && receptionList.map( item => {
                            console.log('item',item.title)
                            return (
                                <Flex.Item className={`fna-flex-icon-item`} key={item.key} style={JSON.parse(item.itemStyle)} onClick={()=>{this.goToLibrary(item.key)}}>
                                    <div className={`fna-flex-icon-item-icon`} style={JSON.parse(item.item_icon_style)}><Icon type={item.icon}/></div>
                                    <div className={`fna-flex-icon-item-text`} style={JSON.parse(item.item_text_style)}>{item.title}</div>
                                </Flex.Item>
                            )
                        })}
                    </Flex>
                </div>



                {/* 路由层 */}
                <div>
                    <Route
                        key={routeData.id}
                        path={routeData.path}
                        render={() => {
                            return (
                                <RouteLayout getContainer={() => document.getElementById("root")}>
                                    <div
                                        key="crmListLayout"
                                        className="wm-route-layout"
                                    >
                                        
                                        <Ocr />
                                    </div>
                                </RouteLayout>
                            )
                        }}
                    /> 
                </div>
            </div>
        )
    }

    //body 里的主要版块 
    goToLibrary=(type)=>{
        const {receptionStore} = this.props;
        // const {changeRoute} = homeStore;
        if(type == 'sweepCodeCheck'){   //特殊跳转
            this.showActionSheet()
        }else{
            this.routeTo(type);
        }
        
    }

    //路由跳转
    routeTo=(type)=>{
        const {history,receptionStore} = this.props;
        const {changeRoute} = receptionStore;

        changeRoute(type);
        const {routeData} = receptionStore;
        history.push(routeData.path)
    
    }

    

}

export default Reception;